<template>
  <div class="shopCar">
    <div class="top">
      <img
        :src="require('@/assets/shop/back.png')"
        alt=""
        class="back"
        @click="$router.go(-1)"
      />
      <div class="top_input">
        <img :src="require('@/assets/shop/search.png')" alt="" class="img" />
        <input
          type="text"
          placeholder="搜索特产、工艺品等伴手礼"
          v-model="name"
        />
      </div>
      <div class="message"  @click="open" >
        <img :src="require('@/assets/shop/kefu.png')" alt="" class="message-img" />
        <!-- <span>1</span> -->
      </div>
    </div>
    <div class="select_border_position">
      <!-- <van-dropdown-menu active-color="#01a862">
        <van-dropdown-item v-model="value1" :options="option1" title="区域" />
        <van-dropdown-item v-model="value2" :options="option2" title="综合" />
        <van-dropdown-item v-model="value1" :options="option1" title="价格" />
        <van-dropdown-item v-model="value2" :options="option2" title="筛选" />
      </van-dropdown-menu> -->
    </div>
    <div class="bar">
      <div class="left">
        <van-sidebar v-model="activeKey" @change="sideChange">
          <van-sidebar-item
            v-for="(item, index) in allData ? allData[0].list : []"
            :key="index"
            :title="item.NAME"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <!-- 选项 -->
        <div class="wrapper" ref="wrapper">
          <ul class="wrapper_cont" ref="cont">
            <li
              :class="[
                'cont_once',
                Sortid == item.ID ? 'option_once2' : 'option_once1',
              ]"
              @click="onOptionClick(item)"
              v-for="(item, index) of allData[0].list[activeKey].list"
              :key="index"
            >
              {{ item.NAME }}
            </li>
          </ul>
        </div>
        <div class="banner"> 
          <img  :src="require('../../../static/swbanner.png')"   alt="" class="right-banner" />

        </div>
        <!-- 列表 -->
        <div class="list" style="background:#f2f2f2">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :immediate-check="false"
          >
            <div
              class="item"
              v-for="(k, index) in list"
              :key="index"
              @click="goDetails(k)"
            >
              <img v-lazy="checkPic(k.PIC)" alt="" class="item-img" />
              <div class="pro">
                <div class="title" >{{ k.NAME }}</div>
                <div class="price">
                  <div class="new">￥{{ k.PRICE }}</div>
                  <div class="old">
                    ￥{{ k.SHI_CHANG_PRICE }}
                  </div>
                </div>
                <div class="change"   >
                  <p  v-for="(kk, index1) in k.sortlsit"
              :key="index1" >{{kk}}</p>
            
                </div>
                <div class="added">
                  <!-- <div class="grade">96%好评</div> -->
                  <section>
                    <div
                      class="left"
                      v-if="$store.state.detail.carListIndex[k.ID.toString()]"
                    >
                      <img
                        @click.self.stop="DelCart(k.ID, k)"
                        style="
                          width: 19px;
                          height: 19px;
                          vertical-align: middle;
                          cursor: pointer;
                        "
                        :src="require('../../../static/sub_red_empty.png')"
                      />
                      <div
                        style="
                          text-align: center;
                          width: 20px;
                          padding-left: 5px;
                          padding-right: 5px;
                        "
                      >
                        {{ $store.state.detail.carListIndex[k.ID.toString()] }}
                      </div>
                    </div>
                    <img
                      @click.self.stop="AddIntoCart(k.ID, k)"
                      style="
                        width: 19px;
                        height: 19px;
                        vertical-align: middle;
                        cursor: pointer;
                      "
                      :src="require('../../../static/add_red.png')"
                    />
                  </section>
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </div>
    </div>
      <div class="shopDetais">
            <van-popup v-model="ShowSelectType" v-if="$store.state.detail2.proData.PRO" z-index="10" custom-style="height:80vh,width:100%"
                position="bottom">
                <div class="buy_content" v-for="(v, j) in guige" :key="j">
                    <div class="pro">
                        <img :src="checkPic($store.state.detail2.proData.PRO.PIC)" alt="" />
                        <div class="desc">
                            <div class="title">
                                {{ $store.state.detail2.proData.PRO.NAME }}
                            </div>
                            <div class="price">
                                ￥{{ $store.state.detail2.proData.PRO.PRICE }}
                            </div>
                        </div>
                    </div>
                    <div class="style">
                        <div class="title">选择{{ v.NAME }}</div>
                        <ul>
                            <li v-for="(k, i) in v.SUB" :key="i" :class="{ choice: $isEmpty(selectType, v.ID + '', 0) == k.ID }"
                                @click="changeType(v.ID, k.ID, i)">
                                {{ k.NAME }}
                            </li>
                        </ul>
                    </div>
                    <div class="num">
                        <div class="title">选择数量</div>
                        <van-stepper v-model="value" />
                    </div>
                    <div class="footers">
                        <p @click="AddToCard">加入购物车</p>
                        <p @click="goPay">立即购买</p>
                    </div>
                </div>
            </van-popup>
        </div>
            <!-- 弹窗开始 -->
        <div class="zg" v-show="isShow"></div>
        <div v-show="isShow" class="tc" @touchmove.prevent @mousewheel.prevent>
            <div class="ke">
                <div class="p">客服</div>
                
                <img class="wexin" :src="require('@/assets/shop/WeChat.jpg')" alt="">
                <a href="tel:0532-87849393">
                    <div class="li">
                        <p class="tell">联系电话：0532-87849393</p>
                        
                        <img :src="require('@/assets/shop/tell.png')" alt="">
                    </div>
                </a>
                <!-- <p class="add"><a href="tel:15020272559">联系电话：15020272559</a>
                    <img :src="require('@/assets/shop/tell.png')" alt="">
                </p> -->
            </div>
            <div class="close" @click="open">×</div>
        </div>
        <!-- 弹窗结束 -->
    <!-- 底部栏 -->
    <v-footer2 background="#f2f2f2"></v-footer2>
  </div>
</template>
<script>    
import "@/css/shop/main.scss";
import Footer2 from "@/common/travel/_footer2.vue";
import Util from "../../util/common";
export default {
  components: {
    "v-footer2": Footer2,
  },
  data() {
    return {
      isShow: false,
      name: "",
      value1: "",
 
      value2: "",
      option1: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      option2: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
      activeKey: 0,
      active: 2,
      // tag
      optionValue: {
        id: "",
      },
      list: [],
      sortlist: [],
      loading: false,
      finished: false,
      pageNum: 0,
      // 左边
      allData: [{ list: [{ list: [] }] }],
      Sortid: 0,
    };
  },
  created() {
    this.getLeft();
    this.activeKey = this.$store.state.category.tabIndex;
  },
  watch: {
    "$store.state.category.tabIndex"(val, old) {
      if (val != old) {
        this.$store.state.detail.lastpara =
          this.allData[0].list[this.$store.state.category.tabIndex].ID || 0;
        this.list = [];
        this.pageNum = 0;
        this.Sortid = 0;
        this.finished = false;
        this.$forceUpdate();
        //this.onLoad();
      }
    },
    Sortid(val, old) {
      if (val != old) {
        this.list = [];
        this.pageNum = 0;
        this.finished = false;
        this.$forceUpdate();
      }
    },
  },
  methods: {
    onSubmit() {},
    //点击选项
    onOptionClick(item) {
      this.finished = false;
      if (this.optionValue.id == item.id) {
        this.optionValue = "";
      } else {
        this.optionValue = item;
      }
      this.Sortid = item.ID;
      // this.optionValue = item
      // this.page_index = 1;
      // this.pageList = [];
      // this.onShows();
    },
    checkPic: function (picurl) {
      return this.$conf.domain + "/" + picurl;
    },
    random() {
      return parseInt(Math.random() * (100 - 90 + 1) + 90, 10) + "%";
    },
    // 左边导航栏切换
    sideChange(i) {
      this.$store.commit("CHANGE_TABINDEX", i);
    },
      open() {
     
            this.isShow = !this.isShow
        },
    getLeft() {
      this.$dopost(
        "/sysapi/pro/sort/",
        null,
        function (res) {
          if (
            res.data &&
            typeof res.data.error != "undefined" &&
            res.data.error === 0
          ) {
            this.allData = res.data.data;
            // 获取右侧列表
            this.onLoad()
          } else {
            Toast(res.data && res.data.mess ? res.data.mess : "接口错误");
          }
        }.bind(this)
      );
    },
    onLoad() {
      //this.loading=true;
      this.$dopost(
        "/sysapi/pro/list/",
        {
          get_detail: 1,
          viewloading: 0,
          page: this.pageNum + 1,
          sort_id:
            this.Sortid > 0
              ? this.Sortid
              : this.allData[0].list[this.$store.state.category.tabIndex].ID ||
                0,
        },
        function (res) {
          if (
            res.data &&
            typeof res.data.error != "undefined" &&
            res.data.error === 0
          ) {
              console.log(res.data.data.PRO);
            if (
              this.$store.state.index.currentPage.page != window.location.href
            ) {
              this.$store.state.index.currentPage.name = "菜谱";
              this.$store.state.index.currentPage.desc =
                res.data.data.mallsort.NAME;
              this.$store.state.index.currentPage.page = window.location.href;
              this.$store.state.index.currentPage.image = Util.getNull(
                res.data.data.PRO
              )
                ? this.$conf.domain + "/" + res.data.data.PRO[0].PIC
                : "";
            }

            for (let i = 0; i < res.data.data.PRO.length; i++) {
              this.list.push(res.data.data.PRO[i]);
 
            }
            this.pageNum = parseInt(res.data.data.page);
            if (
              parseInt(res.data.data.page) >= parseInt(res.data.data.allpage)
            ) {
              this.finished = true;
            }
            this.loading = false;
          } else {
            Toast(res.data && res.data.mess ? res.data.mess : "接口错误");
          }
        }.bind(this)
      );
    },
    goDetails(k) {
        console.log(k)
      this.$store.commit("GET_PRODETAILS", k);
      
      this.$router.push({ path: "/shop/details", query: { id: k.ID } });
    },
    AddIntoCart: function (proid, pro) {
      console.log(pro);
      this.$store.commit("SET_DATAS2", pro);
      if (pro.DETAIL.GUIGE.hasOwnProperty("GUI_GE_1")) {
        this.$store.state.detail2.ShowSelectType = true;
      } else {
        Util.IntoCarGlobal(this);
      }
      //console.log(proid);console.log(detail);
    },
    DelCart: function (proid, pro) {
      Util.SetCartItemCount(this, pro);
    },
  },
};
</script>